<template>
  <div class="search">
    <div class="search-input">
      <input type="text" v-model="keyword" placeholder="请输入关键词" @confirm="getGoodsList"/>
      <icon class="search-icon" type="search"></icon>
      <img class="search-clear" @click="clearKeyword" v-if="FileUrl.length>0&&keyword.length>0" :src="FileUrl+'clear-icon.png'" />
    </div>
    <div class="body">
      <div class="search-default" v-if="!searchShow">
        <div class="hot-search">
          <div class="title">
            <span>热搜</span>
          </div>
          <div class="list" v-if="recommend_keyword.length>0">
            <div class="item" v-for="(item,index) in recommend_keyword" :key="index" @click="changeKeyWords(item)">{{item}}</div>
          </div>
          <div class="null" v-if="recommend_keyword.length==0">
            暂无热门搜索词~~
          </div>
        </div>
        <div class="history-search" v-if="my_history.length>0">
          <div class="title">
            <span>搜索历史</span>
            <div class="delicon" @click="delMykeywordRecord">
              <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/boluodan/delete-icon.png">
              清空
            </div>
          </div>
          <div class="list">
            <div class="item" v-for="(item,index) in my_history" :key="index" @click="changeKeyWords(item)">{{item}}</div>
          </div>
        </div>
      </div>

      <div class="search-nav" v-if="searchShow">
        <div class="search-nav-item" :class="{'active':type == ''}" @click="searchOrderBy('')">综合</div>
        <div class="search-nav-item" :class="{'active':type == 'price'}" @click="searchOrderBy('price')">价格</div>
        <div class="search-nav-item" :class="{'active':type == 'sale'}" @click="searchOrderBy('sale')">销量</div>
      </div>
      <div class="search-list" v-if="searchShow" :class="{'padding-top':searchShow}">
        <div class="null" v-if="searchList.length==0">
          没有搜索到相关产品~~
        </div>
        <div class="search-item" v-for="(item,index) in searchList" :key="index" @click="toGoodsDetail(item.id)">
          <div class="left">
            <div class="item-img">
              <img :src="item.thumb_Url" />
            </div>
          </div>
          <div class="right">
            <div class="item-des">{{item.name}}</div>
            <div class="price">
              <span>￥{{item.s_price}}</span>
              <span class="original">￥5.00</span>
            </div>
            <img class="img" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bifang/caret.png" @click.stop="getGoodsDetails(item.id)" />
            <div class="img-icon" v-if="item.shop_cart_num>0">{{item.shop_cart_num}}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹出层 -->
    <div class="mask"  v-if="showModal" @click="hideCart"></div>
    <div class="modalDlg" v-if="showModal">
      <div class="modalDlg_top">
        <img :src="goodsDetail.thumb_url" alt="">
        <div class="modalDlg_top_right">
          <div class="modalDlg_top_right_name">
            <!-- <span class="modalDlg_top_right_name_tag">海外购</span> -->
            <span>{{goodsDetail.name}}</span>
          </div>
          <div class="cart_price">
            <span>￥{{goodsDetail.s_price}}</span>
            <span>库存：{{goodsDetail.stock}}</span>
          </div>
        </div>
      </div>
      <div class="modalDlo_center">
        <div class="modalDlo_center_tit" v-if="goodsDetail.goods_spu_info.length!=0">规格</div>
        <div class="modalDlo_center_classify">
          <div
            v-for="(item,index) of goodsDetail.goods_spu_info"
            :key="index" @click="select_classify(item,index)"
            :class="{selectClassify:index==classifyIndex}"
          >
            {{item.spu_name}}
          </div>
        </div>
      </div>
      <div class="modalDlo_bottom">
        <count @numberChange="numberChange" :stock="goodsDetail.stock"><div>购买数量</div></count>
      </div>
      <div class="join_cart" @click="addCart">加入购物车</div>
    </div>
    <!-- 弹出层结束 -->
  </div>
</template>

<script>
  import count from '@/components/count'
  export default {
    name: "index",
    components:{
      count
    },
    data(){
      return{
        keyword:'',
        FileUrl: this.$base,
        page: 1,
        limit: 10,
        searchList: [],
        my_history:[],
        recommend_keyword:[],
        searchShow: false,
        type: '',
        showModal: false,
        goodsDetail: '',
        classifyIndex: -1,
        classifyId: '',
        num:1,//购买商品数量
        id: '',
      }
    },
    onShow(){
      this.getSearchKeyword();
      this.keyword = '';
    },
    onReachBottom(){
      this.page++;
      this.getGoodsList()
    },
    methods:{
      searchOrderBy(type){
        this.type = type;
        this.getGoodsList();
      },
      changeKeyWords(item){
        this.keyword = item;
        this.getGoodsList();
      },
      //获取搜索记录与推荐关键词
      async getSearchKeyword(){
        const res = await this.$request.getData('/other/getSearchKeyword',{user_token: wx.getStorageSync('userToken')});
        if (res.data.level == 'success'){
          this.my_history = res.data.data.my_history;
          this.recommend_keyword = res.data.data.recommend_keyword;
        }
      },
      //清空我的搜索记录
      async delMykeywordRecord(){
        const res = await this.$request.getData('/other/delMykeywordRecord',{user_token: wx.getStorageSync('userToken')});
        if (res.data.level == 'success'){
          this.getSearchKeyword();
        }
      },
      //获取搜索结果
      async getGoodsList(){
        if (this.keyword.trim()==''){
          return ;
        }
        wx.showLoading()
        let params = {
          goods_name: this.keyword,
          page: this.page,
          limit: this.limit,
          order_by: this.type,
          user_token: wx.getStorageSync('userToken')
        }
        const res = await this.$request.getData('/goods/getGoodsList',params);
        if (res.data.level == 'success'){
          if (this.page==1){
            this.searchList = res.data.data;
          } else {
            if (res.data.data.length>0){
              this.searchList = this.searchList.concat(res.data.data);
            } else {
              this.page--;
            }
          }

          this.searchShow = true;
          wx.hideLoading()
        }
      },
      clearKeyword(){
        this.keyword = '';
        this.searchShow = false;
        this.getSearchKeyword();
      },
      toGoodsDetail(id){
        wx.navigateTo({url:'/pages/goodsDetail/main?id='+id})
      },
      hideCart(){
        this.showModal = false;
        this.goodsDetail = '';
      },
      async getGoodsDetails(id){
        if (id != this.id){
          this.classifyId = '';
          this.classifyIndex = -1;
        }
        let res=await this.$request.getData('/goods/getGoodsDetails',{goods_id:id})
        if(res.data.level=='success'){
          this.goodsDetail=res.data.data;
          this.id = id;
          this.showModal = true;
        }
      },
      select_classify(item,index){//选择规格
        this.classifyIndex=index
        this.classifyId=item.id
        this.$set(this.goodsDetail,'stock',item.stock)
        this.$set(this.goodsDetail,'s_price',item.price)
      },
      numberChange(num){
        this.num=num
      },
      async addCart(){//添加到购物车
        const _this=this
        if(this.num<=0){
          this.$currency.showToast('购买数量不能为0');
          return
        }else if(this.classifyId==''){
          this.$currency.showToast('先选择规格吧');
          return
        }
        var userToken=wx.getStorageSync('userToken')
        let res=await this.$request.postData('/goods/addShopCart',{
          goods_id:this.id,
          num:this.num,
          user_token:userToken,
          goods_spu_id:this.classifyId
        })
        wx.showLoading()
        if(res.data.level=='success'){
          _this.$currency.showToast('成功加入购物车','success',1500);
          _this.showModal=false;
          _this.classifyId = '';
          _this.classifyIndex = -1;
          wx.hideLoading();
          let num = _this.page;
          for (let i = 0; i< num ; i++){
            _this.page = i+1;
            _this.getGoodsList()
          }

        }else{
          wx.hideLoading({success:function(){
              _this.$currency.showToast(res.data.message,'none',1500)
            }});

        }
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "../../common/css/mixin";
  .search{
    padding-top: 120rpx;
  }
  .search-input{
    position: fixed;
    left: 0;
    top: 0;
    padding: 20rpx 30rpx;
    background: #ffffff;
    width: calc(100vw - 60rpx);
    z-index: 1000;
    input{
      width: calc(100% - 160rpx);
      height: 80rpx;
      line-height: 80rpx;
      border: 1rpx solid #eeeeee;
      padding: 0 80rpx;
      border-radius: 32rpx;
    }
    .search-icon{
      position: absolute;
      top: 40rpx;
      left: 50rpx;
    }
    .search-clear{
      position: absolute;
      top: 40rpx;
      right: 50rpx;
      height: 40rpx;
      width: 40rpx;
    }
  }
  .body{
    padding-top: 40rpx;
  }
  .search-default{
    padding: 0 30rpx;
    .hot-search{
      .title{
        height: 50rpx;
        line-height: 50rpx;
      }
      .list{
        padding-top: 40rpx;
        @include flexWrap(flex-start,flex-start);
        flex-direction: row;
        .item{
          width: calc((100% - 130rpx)/3);
          height: 50rpx;
          text-align: center;
          line-height: 50rpx;
          border: 1rpx solid #e8e8e8;
          background: #ffffff;
          margin-right: 40rpx;
          margin-bottom: 40rpx;
        }
      }
    }
    .history-search{
      .title{
        @include flex(flex-start);
        flex-direction: row;
        height: 50rpx;
        line-height: 50rpx;
        .delicon{
          margin-left: auto;
          height: 50rpx;
          line-height: 50rpx;
          @include flex(flex-start);
          flex-direction: row;
          color: #707070;
          img{
            width: 30rpx;
            height: 30rpx;
          }
        }
      }
      .list{
        padding-top: 40rpx;
        @include flexWrap(flex-start,flex-start);
        flex-direction: row;
        .item{
          width: calc((100% - 130rpx)/3);
          height: 50rpx;
          text-align: center;
          line-height: 50rpx;
          border: 1rpx solid #e8e8e8;
          background: #ffffff;
          margin-right: 40rpx;
          margin-bottom: 40rpx;

        }
      }
    }
  }
  .search-nav{
    position: fixed;
    top: 120rpx;
    left: 0;
    padding: 0 30rpx;
    background: #ffffff;
    width: calc(100vw - 60rpx);
    z-index: 1000;
    @include flex(flex-start);
    flex-direction: row;
    .search-nav-item{
      width: 33.3%;
      height: 50rpx;
      line-height: 50rpx;
      &:nth-child(2){
        text-align: center;
      }
      &:last-child{
        text-align: right;
      }
    }
  }
  .padding-top{
    padding-top: 20rpx;
  }
  .active{
    font-size: 32rpx;
    font-weight: bold;
  }
  .search-list{
    @include flexWrap(center,flex-start);
    flex-direction: column;
    width: 100vw;
    /*background: #ffffff;*/
    .search-item{
      width: calc(100% - 40rpx);
      padding: 20rpx;
      /*border-radius: 16rpx;*/
      border-bottom: 1rpx solid #eeeeee;
      overflow: hidden;
      background: #ffffff;
      @include flex(flex-start);
      flex-direction: row;
      .left{
        width: 200rpx;
        height: 200rpx;
        overflow: hidden;
        .item-img{
          width: 100%;
          height: 100%;
        }
      }
      .right{
        width: calc(100% - 200rpx);
        position: relative;
        .item-des{
          height: 80rpx;
          line-height: 80rpx;
          @include ellipsis(1);
        }
        .price{
          font-size: 26rpx;
          @include flex(flex-start,flex-end);
          flex-direction: row;
          height: 30rpx;
          width: calc(100% - 300rpx);
          color: #e12317;
          .original{
            font-size: 22rpx;
            color: #707070;
            text-decoration: line-through;
            padding-left: 20rpx;
          }
        }
        .img{
          position: absolute;
          bottom: 0;
          right: 0;
          width: 40rpx;
          height: 40rpx;
        }
        .img-icon{
          position: absolute;
          bottom: 20rpx;
          right: 0;
          width: 20rpx;
          height: 20rpx;
          background: #e12317;
          border-radius: 360rpx;
          color: #ffffff;
          font-size: 18rpx;
          text-align: center;
          line-height: 20rpx;
        }
      }
    }
  }
  .null{
    padding: 40rpx;
    text-align: center;
    color: #707070;
    width: calc(100% - 80rpx);
  }
  /* 弹出框 */
  .mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9000;
    opacity: 0.7;
  }
  .modalDlg{
    width: 100%;
    height:45%;
    position: fixed;
    bottom:0;
    left: 0;
    z-index: 9999;
    background-color: #fff;
  }

  .modalDlg_top{
    padding:5px;
    padding-right:25px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;

  }
  .modalDlg_top>img{
    width:80px;
    height: 80px;
  }
  .modalDlg_top_right{
    margin-left:20px;
    width:200px;
  }
  .modalDlg_top_right_name{
    display: flex;
    align-items: center
  }
  .modalDlg_top_right_name_tag{
    color:purple;
    display: inline-block;
    width:50px;
    text-align: center;
    border:1px solid purple;
    font-size: 10px;
    border-radius: 5px;
    margin-right:5px;
  }
  .modalDlg_top_right_name_tag+span{
    width:200px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .modalDlo_bottom{
    margin-left:5px;
  }
  .cart_price{
    margin-top:15px;
    display: flex;
    justify-content: space-between;
    align-items: center
  }
  .cart_price>span:nth-child(1){
    color:red;
  }

  .modalDlo_center,.modalDlo_center_tit,.modalDlo_center_classify{
    width:100%;
  }
  .modalDlo_center_classify{
    display:flex;
    align-items: center;
    flex-wrap:wrap;
    margin:10px 0;
    padding-bottom: 20px;
  }
  .modalDlo_center_classify>div{
    border:1px solid #eee;
    padding:2.5px 5px;
    border-radius: 5px;
    margin-left:5px;
    text-align: center;
  }
  .modalDlo_center_tit{
    padding-left:10px;
  }
  .join_cart{
    width:100%;
    background: rgb(196, 75, 75);
    color:#fff;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    position: absolute;
    bottom:0;
  }
  button::after {
    border: none;
  }
  button {
    background-color: #fff;
    line-height: 16px;
    font-size: 10px;
    border-radius:0;
  }
  /* 规格 */
  .selectClassify{
    border:red 1px solid !important;
    color:red;
  }
</style>
